<template>

  <div class="layui-container fly-marginTop">
    <div
      class="fly-panel fly-panel-user"
      pad20
    >
      <div
        class="layui-tab layui-tab-brief"
        lay-filter="user"
      >
        <ul class="layui-tab-title">
          <li>
            <router-link :to="{name: 'login'}">登入</router-link>
          </li>
          <li class="layui-this">注册</li>
        </ul>
        <validation-observer
          ref="observer"
          v-slot="{ validate }"
        >
          <div
            class="layui-form layui-tab-content"
            id="LAY_ucm"
            style="padding: 20px 0;"
          >
            <div class="layui-tab-item layui-show">
              <div class="layui-form layui-form-pane">
                <form method="post">
                  <validation-provider
                    name="username"
                    rules="required|email"
                    v-slot="{ errors }"
                  >
                    <div class="layui-form-item">
                      <label
                        for="L_email"
                        class="layui-form-label"
                      >邮箱</label>
                      <div class="layui-input-inline">
                        <input
                          v-model="username"
                          type="text"
                          id="L_email"
                          name="email1111"
                          required
                          lay-verify="email"
                          autocomplete="off"
                          class="layui-input"
                        >
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00;">{{ errors[0] }}</span>
                      </div>
                      <!-- <div class="layui-form-mid layui-word-aux">{{ errors[0] }}</div> -->
                    </div>
                  </validation-provider>
                  <validation-provider
                    name="name"
                    rules="required"
                    v-slot="{ errors }"
                  >
                    <div class="layui-form-item">
                      <label
                        for="L_username"
                        class="layui-form-label"
                      >昵称</label>
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          v-model="name"
                          id="L_username"
                          name="name"
                          required
                          lay-verify="required"
                          autocomplete="off"
                          class="layui-input"
                        >
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00;">{{ errors[0] }}</span>
                      </div>
                    </div>
                  </validation-provider>
                  <validation-provider
                    name="password"
                    vid="confirmation"
                    rules="required|min:6"
                    v-slot="{ errors }"
                  >
                    <div class="layui-form-item">
                      <label
                        for="L_pass"
                        class="layui-form-label"
                      >密码</label>
                      <div class="layui-input-inline">
                        <input
                          name="password"
                          vid="confirmation"
                          v-model="password"
                          type="password"
                          id="L_pass"
                          required
                          lay-verify="required"
                          autocomplete="off"
                          class="layui-input"
                        >
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00;">{{errors[0]}}</span>
                      </div>
                    </div>
                  </validation-provider>
                  <validation-provider
                    name="repass"
                    rules="required|confirmed:confirmation"
                    v-slot="{ errors }"
                  >
                    <div class="layui-form-item">
                      <label
                        for="L_repass"
                        class="layui-form-label"
                      >确认密码</label>
                      <div class="layui-input-inline">
                        <input
                          v-model="repass"
                          name="repass"
                          type="password"
                          id="L_repass"
                          required
                          lay-verify="required"
                          autocomplete="off"
                          class="layui-input"
                        >
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00;">{{ errors[0] }}</span>
                      </div>
                    </div>
                  </validation-provider>

                  <!-- <ValidationProvider
                    rules="confirmed:confirmation"
                    v-slot="{ errors }"
                  >
                    <input
                      v-model="value"
                      type="text"
                    >
                    <span>{{ errors[0] }}</span>
                  </ValidationProvider>

                  <ValidationProvider
                    v-slot="{ errors }"
                    vid="confirmation"
                  >
                    <input
                      v-model="confirmation"
                      type="text"
                    >
                    <span>{{ errors[0] }}</span>
                  </ValidationProvider> -->

                  <validation-provider
                    name="vercode"
                    rules="required|length:4"
                    v-slot="{ errors }"
                  >
                    <div class="layui-form-item">
                      <label
                        for="L_vercode"
                        class="layui-form-label"
                      >人类验证</label>
                      <div class="layui-input-inline">
                        <input
                          v-model="code"
                          type="text"
                          id="L_vercode"
                          required
                          lay-verify="required"
                          placeholder="请回答后面的问题"
                          autocomplete="off"
                          class="layui-input"
                        >
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00;">{{ errors[0] }}</span>
                      </div>
                      <div
                        class="captcha"
                        v-html="captcha"
                        @click="getCaptcha"
                      ></div>
                    </div>
                  </validation-provider>
                  <div class="layui-form-item">
                    <button
                      class="layui-btn"
                      type="button"
                      @click="validate().then(submit)"
                      lay-filter="*"
                      lay-submit
                    >立即注册</button>
                  </div>
                  <div class="layui-form-item fly-form-app">
                    <span>或者直接使用社交账号快捷注册</span>
                    <a
                      href=""
                      onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"
                      class="iconfont icon-qq"
                      title="QQ登入"
                    ></a>
                    <a
                      href=""
                      onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"
                      class="iconfont icon-weibo"
                      title="微博登入"
                    ></a>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </validation-observer>
      </div>
    </div>

  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from "vee-validate";
import { getCode, reg } from "@/api/login";
export default {
  name: "reg",
  data() {
    return {
      captcha: "",
      username: "",
      repass: "",
      password: "",
      name: "",
      code: "",
      value: "",
    };
  },
  components: {
    ValidationProvider,
    ValidationObserver,
  },
  methods: {
    getCaptcha() {
      let sid = this.$store.state.sid;
      getCode(sid).then((res) => {
        this.captcha = res.data;
      });
    },
    async submit() {
      // 手动显示错误
      // this.$refs.observer.setErrors({ username: ["验证码已失效, 请重新获取!"] });
      const isValid = await this.$refs.observer.validate();
      if (isValid) {
      } else {
        return;
      }
      console.log(123);
      reg({
        username: this.username,
        password: this.password,
        name: this.name,
        code: this.code,
        sid: this.$store.state.sid,
      })
        .then((res) => {
          if (res.code === 200) {
            console.log(res);
            this.username = "";
            this.password = "";
            this.name = "";
            this.code = "";
            console.log(this.$refs);

            this.$refs.observer.reset();

            // 用户注册成功以后, 跳转到登录界面, 让用户登录
            this.$alert("恭喜你, 注册成功!");
            setTimeout(() => {
              console.log(121313131312);
              this.$router.push("/login");
            }, 1000);
          } else {
            this.$refs.observer.setErrors(res.msg);
          }
        })
        .catch((err) => {
          console.log("err");
        });
    },
  },
  mounted() {
    this.getCaptcha();
  },
};
</script>

<style lang="scss" scoped>
</style>